<template>
    <div>
        <a-menu @menuItemClick="onClickMenuItem" :defaultOpenKeys="defaultOpenKeys" :selectedKeys="selectedKeys">
            <a-menu-item v-for="(menu) in menus" :key="menu.path">
                <template #icon>
                    <component v-if="menu?.meta?.icon" :is="menu?.meta?.icon" />
                    <icon-font v-if="menu?.meta?.iconFont" :type="menu?.meta?.iconFont" />
                </template>
                {{ menu.meta.title }}
            </a-menu-item>
        </a-menu>
    </div>
</template>
<script lang="ts" setup>
import IconFont from '@/composables/IconFont'
const props = defineProps({
    menus: {
        type: Array as any,
        required: true
    }
})
const { menus } = props

const { defaultOpenKeys, selectedKeys, onClickMenuItem } = useRouteMenu(menus)

// const activeMenuName = computed(() => {
//     const path = router.currentRoute.value.path;

//     const menu = menus.find((item) => {
//         if (item.path === path) {
//             return true;
//         }

//         // if (item.children) {
//         //     return item.children.some((child) => child.path === path);
//         // }
//         return false;

//     });
//     console.log("active menu", menu?.name);
//     return menu?.name;
// });
// const router = useRouter();


</script>
<style scoped lang="css"></style>